watch sexy videos at nza-vids!
*
*
*
*

Hướng dẩn auto wap/web

Auto wap/web có nghĩa là khi vào bằng pc sẽ khác. khi vào bằng mobile sẻ khác nhau .và lợi ích có thể thấy rõ là trên trang dành cho pc ta có thể bố trí các script, quảng cáo, popup,... còn trang dành cho mobile thì làm đơn giản để tiết kiệm dung lượng khi duyệt.
Nào bắt đầu:

-Với HTML
+Tạo 3 trang có tên như sau và nhớ là thiết kế 3 trang này cho ổn đã nhé:
tentrang_web.html (dành cho web hay pc)
tentrang_mobile.html (dành cho điện thoại)
tentrang_touch.html (dành cho iphone/ipad v.v..)
+Thêm mã này vào trang wap của bạn (có thể là trang INDEX hoặc gì tùy bạn):
<xt:include file="/đường dẫn đến trang của bạn/tentrang_<xt id="get_device_template" />.html" />
Khi vào bằng các thiết bị khác nhau nó sẽ tự chuyển về trang tương ứng cho thiết bị đó.

-Với CSS:
Tạo 3 giao diện CSS với 3 tên như sau, thiết kế giao diện và lưu lại vào 1 chỗ nào đó trên wap (tốt nhất lưu ở thư mục gốc cho nó tiện lợi):
web.css
mobile.css
touch.css
+Tạo tệp "_headtags" và thêm cái mã này vào:
<link rel="stylesheet" type="text/css" href="/<xt:get_device_template />.css" />
Vậy là khi vào bằng các thiết bị khác nhau thì giao diện khác nhau.
Khi bạn vào bằng đt thì giao diện đơn giản, còn khi vào bằng pc thì giao diện sẽ có rất khác nhau.
Đây là code auto dành riêng cho xtgem:
-trong code này mình sử dụng chức năng phát hiên thiết bị truy cập của xtgem thông qua code <xt id="get_device_template"/>.cái này nhiều bạn biết rồi, và mình nói là cho các bạn chưa biết,
khi view souce code này nó sẽ hiển thị 1 trong 3 từ "web", "mobile", "touch"; có nghĩa là khi truy cập bằng pc thì nó hiển thị từ "web", điện thoại thường thì hiển thị từ "mobile", iphone hoặc ipad và các dòng điện thoại đời cao thì hiển thị từ "touch". rất khả quan, đúng không?!
với code này các bạn có thể áp dụng với nhiều chức năng. ví dụ như code chuyển hướng trang cho thiết bị:
<script>window.location="/folder_or_no_folder/<xt id="get_device_template"/>";</script>
giới thiệu sơ qua vậy thôi, và đây code script auto wap/web dành cho xtgem:
<script type="text/javasrcipt">
var <xt id="get_device_template"/>;
if
(<xt id="get_device_template"/>==web);
{document.write("viết tất cả code bạn muốn hiển thị trên máy tính tại đây")}
else if{<xt id="get_device_template"/>==touch);
{document.write("viết tất cả code bạn muốn hiển thị trên iphone, ipad, ... tại đây")}
else{document.write("viết tất cả code bạn muốn hiển thị trên điện thoại thường tại đây")};</script>
<noscript>viết code wml cho dòng điện thoại không hỗ trợ script</noscript>

<script type=text/javascipt>
{document.write("<script type="text/javasrcipt">
var <xt id="get_device_template"/>"+navigator.appName+";
if
(<xt id="get_device_template"/>"+navigator.appName+"==mobileOpera);
{document.write("viết tất cả code bạn muốn hiển thị trên Opera mini tại đây")}
else if
("+navigator.appName+"==UCweb)
{document.write("viết tất cả code bạn muốn hiển thị trên UCweb tại đây")};</script>");
</script>
lưu ý navigator.appName trên UCweb hiển thị là gì thì mình bó tay vì điện thoại mình không cài UC browser cho nên mình viết đại là UCweb không biết có đúng không nữa. mà nếu không đúng thì thôi nhé, bạn nào biết thì tự sửa, không biết thì dán code này vào wap mà view rồi edit lại chữ "UCweb" trên kia:
<script type="text/javasrcipt">
{document.write("+navigator.appName+")};
</script>

code 2, code auto wap/web cho các wap khác:
với code này mình sử dụng chức năng navigator.appName phát hiện tên trình duyệt từ javascript như giới thiệu ở trên giới thiệu, lưu ý nếu bạn biết thêm trình duyệt nào dành cho máy tính thì cứ tự nhiên thêm vào phần script phát hiện trình duyệt dành cho máy tính.
code auto wap/web cho các wap khác:
[quote]<script type="text/javascript">
{document.write("<script type="text/javascript">
if
("+navigator.appName+"=="Internet exeroler"|| "+navigator.appName+"=="Mozilla Firefox" || "+navigator.appName+"=="Google Chrome"|| "+navigator.appName+"=="Opera"|| "+navigator.appName+"=="Sarafi"){document.write("v iết tất cả code bạn muốn hiển thị trên máy tính");}else{document.write("viết tất cả code bạn muốn hiển thị trên điện thoại");}</script><noscript>viết code wml cho dòng điện thoại không hỗ trợ script</noscript>")};
</script>

Phương pháp tương tự

Chuyển đổi giao diện wap/web khi truy cập từ Mobile hoặc PC
Xtgem hỗ trợ tự động phát hiện khách truy cập đang dùng thiết bị gì
Code:
[red]<xt:get_device_template />[/red]
Có 3 trường hợp:
- mobile : Nếu người dùng sử dụng điện thoại hoặc các thiết
bị cầm tay thông thường
- web : Người dùng truy cập từ PC
-touch : Người dùng sử dụng các dòng máy đời rất cao Iphone, Galaxy hoặc Ipad
Qua đó chúng ta có thể tạo ra code thay đổi giao diện phù
hợp với các thiết bị trên.
- Bạn cần viết 3 css cho 3 loại giao diện. Đặt tên như sau: css
cho mobile (wap) đặt tên là mobile.css, css cho pc web.css, css cho touch touch.css (touch rất hiếm nên ko cần quan tâm nhé! sau đây HD Auto wap/web). Chưa đủ trình viết css có thể lấy của wap khác
- Tiếp theo bạn cần chèn code put css này vào _headtags hoặc chèn vào file bạn muốn thay đổi giao diện. Nhớ bỏ css
đang dùng đi nhé.
Code:
<link rel="stylesheet"
type="text/css" href="/thư_mục_chứa_css/<xt:get_device_template />.css" />
Ví dụ bạn đặt các file css trên trong thư mục my-style thì
code là:
<link rel="stylesheet"
type="text/css" href="/my-style/<xt:get_device_template />.css" />
Tiếp theo để có thể chuyển đổi giao diện bạn cần 3 file html ở đây mình ví dụ với
index (trang chủ) bạn cần tạo 3 file
(index, index_mobile,
index_web)
- index_mobile : bạn thiết kế giao diện wap cho mobile
- index_web : giao diện web cho PC
- index : Tắt _header và _footer đi nhé chèn code này vào:
<xt:include file="index_<xt:get_device_template />">
Các file khác làm tương tự.
Chúc thành công
Chạm vào để copy
Gửi cho bạn bè
GỬI SMS
Trang hiện tại:
dat007.xtgem.com/Tien ich/Hd giao dien web
Trang trước
Quay lại ☜ ☞ Dat007

AD Dat007 Xin chào:



U-ON